<template>
  <div class="rich-text-demo">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>编辑器</span>
            </div>
          </template>

          <RichTextEditor v-model="content" :height="500" placeholder="请输入内容..." />

          <div class="editor-actions">
            <el-button type="primary" @click="getContent">获取内容</el-button>
            <el-button @click="setContent">设置内容</el-button>
            <el-button @click="clearContent">清空内容</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>内容预览</span>
            </div>
          </template>

          <div class="content-preview" v-html="content"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>HTML内容</span>
            </div>
          </template>

          <pre class="html-content">{{ content }}</pre>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import RichTextEditor from '@/components/RichTextEditor.vue'

const content = ref('')

// 获取编辑器内容
const getContent = () => {
  ElMessage.success('已获取内容，请查看HTML内容区域')
  console.log('编辑器内容:', content.value)
}

// 设置编辑器内容
const setContent = () => {
  const sampleContent = `
    <h2>欢迎使用富文本编辑器</h2>
    <p>这是一段示例文本，展示了富文本编辑器的基本功能：</p>
    <ul>
      <li>文本加粗、斜体、下划线</li>
      <li>字体大小和颜色设置</li>
      <li>插入图片和链接</li>
      <li>创建列表和表格</li>
      <li>代码块和引用</li>
    </ul>
    <p>您可以在这里自由编辑内容，体验丰富的文本编辑功能。</p>
    <blockquote>这是一个引用块示例</blockquote>
    <p>编辑器还支持插入代码：</p>
    <pre><code class="language-javascript">console.log('Hello, World!');</code></pre>
  `
  content.value = sampleContent
  ElMessage.success('已设置示例内容')
}

// 清空编辑器内容
const clearContent = () => {
  content.value = ''
  ElMessage.success('已清空内容')
}
</script>

<style scoped>
.rich-text-demo {
  padding: 0px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-actions {
  margin-top: 20px;
  text-align: center;
}

.content-preview {
  min-height: 500px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fafafa;
}

.html-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>